<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        .choose-table{
          border: solid 1px #eee;
          width: 182px;
          height: 182px;
          border-radius: 6px;
        }
        .choose-table li{
          width: 60px;
          height: 60px;
          float: left;
          text-align: center;
          line-height: 60px;
          position:relative; 
          cursor: pointer;
          background: #fafafa;
        }
        .right_bottom_border{
          border-right: solid 1px #eee;
          border-bottom: solid 1px #eee;
        }
        .right_border{
          border-right: solid 1px #eee;
        }
        .bottom_border{
          border-bottom: solid 1px #eee;
        }
        input[class=site]{
          /*去除默认样式*/
          -webkit-appearance: none!important;
          -moz-appearance: none!important;
          appearance: none!important;
        }

        .isSelect input[class=site]{
          /*自定义样式*/
          position: absolute;
          display: inline-block;
          bottom: 4px;
          right: 4px;
          z-index: 2;
          width: 16px;
          height: 16px;
          border: 1px solid #00bfff;
          outline: none;
          cursor: pointer;
          border-radius: 50%;
          background-color: #00bfff;
        }

        /*选中的样式*/
        .isSelect{
          color: #00bfff;
          background-color: white!important;
        }
        .isSelect input[class=site]:before{
          width: 1px;
          height: 0px;
          left: 20%;
          top: 50%;
          transform: skew(0deg, 50deg);
        }
        .isSelect input[class=site]:after{
          width: 4px;
          height: 0px;
          left: 40%;
          top: 40%;
          transform: skew(0deg, -50deg);
          background-color: #00bfff
        }
        .isSelect input[class=site]:before,input[class=site]:after{
          content: '';
          pointer-events: none;
          position: absolute;
          color: black;
          border: 1px solid #fff;
          background-color: white;
        }
        .choose-table .layui-form-radio{
          display: none!important;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">存储方式</label>
        <div class="layui-input-block">
            <input  lay-filter="attachment_driver" type="radio" name="attachment_driver" value="Local" title="本地" {if $config['attachment_driver'] == 'Local'}checked{/if}>
            <input  lay-filter="attachment_driver" type="radio" name="attachment_driver" value="Aliyun" title="阿里云OSS" {if $config['attachment_driver'] == 'Aliyun'}checked{/if}>
        </div>
    </div>
    <div class="layui-form-item aliyun">
        <label class="layui-form-label required">OSS-accessKeyId</label>
        <div class="layui-input-block">
            <input type="text" name="attachment_aliyun_key_id"  placeholder="请输入OSS-accessKeyId"  value="{$config['attachment_aliyun_key_id']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item aliyun">
        <label class="layui-form-label required">OSS-accessKeySecret</label>
        <div class="layui-input-block">
            <input type="text" name="attachment_aliyun_key_secret"  placeholder="请输入OSS-accessKeySecret"  value="{$config['attachment_aliyun_key_secret']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item aliyun">
        <label class="layui-form-label required">OSS-Endpoint</label>
        <div class="layui-input-block">
            <input type="text" name="attachment_aliyun_endpoint"  placeholder="请输入OSS-Endpoint"  value="{$config['attachment_aliyun_endpoint']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item aliyun">
        <label class="layui-form-label required">OSS-bucket</label>
        <div class="layui-input-block">
            <input type="text" name="attachment_aliyun_bucket"  placeholder="请输入OSS-bucket"  value="{$config['attachment_aliyun_bucket']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">允许上传附件大小</label>
        <div class="layui-input-block">
            <input type="text" name="uploadmaxsize"  placeholder="请输入允许上传附件大小"  value="{$config['uploadmaxsize']}" class="layui-input">
            <tip>单位:KB</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">允许上传附件类型</label>
        <div class="layui-input-block">
            <input type="text" name="uploadallowext"  placeholder="请输入允许上传附件类型"  value="{$config['uploadallowext']}" class="layui-input">
            <tip>多个用|分开</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">前台允许上传附件大小</label>
        <div class="layui-input-block">
            <input type="text" name="qtuploadmaxsize"  placeholder="请输入前台允许上传附件大小"  value="{$config['qtuploadmaxsize']}" class="layui-input">
            <tip>单位:KB</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">前台允许上传附件类型</label>
        <div class="layui-input-block">
            <input type="text" name="qtuploadallowext"  placeholder="请输入前台允许上传附件类型"  value="{$config['qtuploadallowext']}" class="layui-input">
            <tip>多个用|分开</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">是否开启图片水印</label>
        <div class="layui-input-block">
            <input type="radio" name="watermarkenable" value="1" title="是" {if $config['watermarkenable'] == 1}checked{/if}>
            <input type="radio" name="watermarkenable" value="0" title="否" {if $config['watermarkenable'] == 0}checked{/if}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">水印-宽</label>
        <div class="layui-input-block">
            <input type="text" name="watermarkminwidth"  placeholder="请输入水印-宽(单位:PX)"  value="{$config['watermarkminwidth']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">水印-高</label>
        <div class="layui-input-block">
            <input type="text" name="watermarkminheight"  placeholder="请输入水印-高(单位:PX)"  value="{$config['watermarkminheight']}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">水印图片</label>
        <div class="layui-input-block">
            <input type="hidden" name="watermarkimg"  placeholder="请输入水印图片"  value="{$config['watermarkimg']}" class="layui-input filepath">
            {if $config['watermarkimg']}
                <image src="{$config['watermarkimg']}" width="100px" class="showImage"/>
            {else/}
                <image src="" style="display: none;" width="100px" class="showImage"/>
            {/if}
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">水印透明度</label>
        <div class="layui-input-block">
            <input type="text" name="watermarkpct"  placeholder="请输入水印透明度"  value="{$config['watermarkpct']}" class="layui-input">
            <tip>0-100之间的数字，0代表完全透明，100代表不透明</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">水印质量</label>
        <div class="layui-input-block">
            <input type="text" name="watermarkquality"  placeholder="请输入水印质量"  value="{$config['watermarkquality']}" class="layui-input">
            <tip>0-100之间的数字,决定 jpg 格式图片的质量，100为原图</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <!-- <div class="layui-inline"> -->
            <label class="layui-form-label">水印位置</label>
            <div class="layui-input-block" style="margin-left: 0px;">
                <div class="choose-table">
                    <ul>
                        <li class="right_bottom_border {if $config['watermarkpos'] == 1} isSelect {/if}">左上<input class="site" type="radio" {if $config['watermarkpos'] == 1} checked="" {/if} name="watermarkpos" value="1"></li>
                        <li class="right_bottom_border {if $config['watermarkpos'] == 2} isSelect {/if}">中上<input class="site" type="radio" {if $config['watermarkpos'] == 2} checked="" {/if} name="watermarkpos" value="2"></li>
                        <li class="bottom_border {if $config['watermarkpos'] == 3} isSelect {/if}">右上<input class="site" type="radio" {if $config['watermarkpos'] == 3} checked="" {/if} name="watermarkpos" value="3"></li>
                        <li class="right_bottom_border {if $config['watermarkpos'] == 4} isSelect {/if}">左中<input class="site" type="radio" {if $config['watermarkpos'] == 4} checked="" {/if} name="watermarkpos" value="4"></li>
                        <li class="right_bottom_border {if $config['watermarkpos'] == 5} isSelect {/if}">正中<input class="site" type="radio" {if $config['watermarkpos'] == 5} checked="" {/if} name="watermarkpos" value="5"></li>
                        <li class="bottom_border {if $config['watermarkpos'] == 6} isSelect {/if}">右中<input class="site" type="radio" {if $config['watermarkpos'] == 6} checked="" {/if} name="watermarkpos" value="6"></li>
                        <li class="right_border {if $config['watermarkpos'] == 7} isSelect {/if}">左下<input class="site" type="radio" {if $config['watermarkpos'] == 7} checked="" {/if} name="watermarkpos" value="7"></li>
                        <li class="right_border {if $config['watermarkpos'] == 8} isSelect {/if}">中下<input class="site" type="radio" {if $config['watermarkpos'] == 8} checked="" {/if} name="watermarkpos" value="8"></li>
                        <li class="{if $config['watermarkpos'] == 9} isSelect {/if}">右下<input class="site" type="radio" {if $config['watermarkpos'] == 9} checked="" {/if} name="watermarkpos" value="9"></li>
                        <div style="clear: both;"></div>
                    </ul>
                </div>
            </div>
        <!-- </div> -->
    </div>                 
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="/static/admin/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: "{:url('upload.upload/setting')}",
                type: 'post',
                dataType: 'json',
                data:data.field,
                success: function (data) {
                    layer.msg(data.msg);
                    //编辑成功
                    if(data['status']){
                        setTimeout(function(){
                            if(window !== parent.window) parent.window.layer.closeAll();
                        }, 2000)
                    }
                },
                error: function (xhr, textstatus, thrown) {
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });

            return false;
        });

        //上传水印图
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: "{:url('upload.Api/uploadImage')}" //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.code == 200){
                    //图片显示
                    $('.showImage').show();
                    $('.showImage').attr({'src':res.data.fileurl});
                    //赋值
                    $('.filepath').val(res.data.fileurl);
                }else{
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });

        var driver = "{$config['attachment_driver']}";
        if(driver == 'Aliyun'){
            $(".aliyun").show();
        }else{
            $(".aliyun").hide();
        }
        form.on('radio(attachment_driver)', function(data){
            var value = data.value;
            if(value == 'Aliyun'){
                $(".aliyun").show();
            }else{
                $(".aliyun").hide();
            }
        });  

        $('.choose-table li').click(function() {
            console.log($(this))
            $(this).addClass('isSelect')
            $(this).siblings().removeClass('isSelect')
            $(this)[0].childNodes[1].checked = true
        })

    });
</script>
</body>
</html>